<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import { NConfigProvider, NMessageProvider, NDialogProvider, lightTheme, darkTheme } from 'naive-ui'
import UseThemeStore from '@/stores/theme'
import ThemeUtils from '@/utils/ThemeUtils'
import storage from './utils/storage'
const themeStore = UseThemeStore()
const theme = ref(lightTheme)

themeStore.$subscribe(() => {
  theme.value = ThemeUtils.getTheme()
})
onMounted(()=>{
  const themeLabel=storage.get('theme')
  if(themeLabel) ThemeUtils.setTheme(themeLabel)
  theme.value = ThemeUtils.getTheme()
})
</script>

<template>
  <n-message-provider>
    <n-dialog-provider>
      <n-config-provider :theme="theme">
        <div class="window-container">
          <div class="app-container">
            <RouterView />
          </div>
        </div>
      </n-config-provider>
    </n-dialog-provider>
  </n-message-provider>
</template>

<style scoped>
.app-container {
  height: 100vh;
  overflow: hidden;
  width: 100vw;
  max-width: 1280px;
  margin: auto;
}
.window-container {
  width: 100vw;
  height: 100vh;
}
</style>

<!--<style>-->

<!--header {-->
<!--  line-height: 1.5;-->
<!--  max-height: 100vh;-->
<!--}-->

<!--.logo {-->
<!--  display: block;-->
<!--  margin: 0 auto 2rem;-->
<!--}-->

<!--nav {-->
<!--  width: 100%;-->
<!--  font-size: 12px;-->
<!--  text-align: center;-->
<!--  margin-top: 2rem;-->
<!--}-->

<!--nav a.router-link-exact-active {-->
<!--  color: var(&#45;&#45;color-text);-->
<!--}-->

<!--nav a.router-link-exact-active:hover {-->
<!--  background-color: transparent;-->
<!--}-->

<!--nav a {-->
<!--  display: inline-block;-->
<!--  padding: 0 1rem;-->
<!--  border-left: 1px solid var(&#45;&#45;color-border);-->
<!--}-->

<!--nav a:first-of-type {-->
<!--  border: 0;-->
<!--}-->

<!--@media (min-width: 1024px) {-->
<!--  header {-->
<!--    display: flex;-->
<!--    place-items: center;-->
<!--    padding-right: calc(var(&#45;&#45;section-gap) / 2);-->
<!--  }-->

<!--  .logo {-->
<!--    margin: 0 2rem 0 0;-->
<!--  }-->

<!--  header .wrapper {-->
<!--    display: flex;-->
<!--    place-items: flex-start;-->
<!--    flex-wrap: wrap;-->
<!--  }-->

<!--  nav {-->
<!--    text-align: left;-->
<!--    margin-left: -1rem;-->
<!--    font-size: 1rem;-->

<!--    padding: 1rem 0;-->
<!--    margin-top: 1rem;-->
<!--  }-->
<!--}-->

<!--</style>-->
